<template>
  <div class="tuopu-view">
    <el-card shadow="hover" >
      <div class="tuopu-view-chart-wrapper">
        <div id="main2" style="width: 100%; height: 100vh"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// import axios from "axios";

// 响应式数据
const nodesInfo = ref(null);
const chartInstance = ref(null);

// 节点和连接数据
const nodes = [
  {
    x: "1",
    y: "1",
    name: "客户端1",
    img: "kehuduan.png",
    state: "1",
  },
  {
    x: "1",
    y: "10",
    name: "客户端2",
    img: "kehuduan.png",
    state: "0",
  },
  {
    x: "3",
    y: "5",
    name: "应用服务器",
    img: "fuwuqi.png",
    state: "1",
  },
  {
    x: "5",
    y: "3",
    name: "Redis",
    img: "redis.png",
    state: "1",
  },
  {
    x: "5",
    y: "6",
    name: "备份负载",
    img: "fuwuqi.png",
    state: "1",
  },
  {
    x: "5",
    y: "9",
    name: "主流通道",
    img: "fuwuqi.png",
    state: "1",
  },
  {
    x: "7",
    y: "3",
    name: "交换1",
    img: "jiaohuanji.png",
    state: "1",
  },
  {
    x: "7",
    y: "6",
    name: "交换2",
    img: "jiaohuanji.png",
    state: "0",
  },
  {
    x: "7",
    y: "9",
    name: "交换3",
    img: "jiaohuanji.png",
    state: "0",
  },
  {
    x: "9",
    y: "3",
    name: "隔离1",
    img: "fuwuqi.png",
    state: "1",
  },
  {
    x: "9",
    y: "6",
    name: "隔离2",
    img: "fuwuqi.png",
    state: "1",
  },
  {
    x: "9",
    y: "9",
    name: "隔离3",
    img: "fuwuqi.png",
    state: "1",
  },
  {
    x: "11",
    y: "3",
    name: "交换4",
    img: "jiaohuanji.png",
    state: "1",
  },
  {
    x: "11",
    y: "6",
    name: "交换5",
    img: "jiaohuanji.png",
    state: "1",
  },
  {
    x: "11",
    y: "9",
    name: "交换6",
    img: "jiaohuanji.png",
    state: "1",
  },
  {
    x: "13",
    y: "5",
    name: "网关",
    img: "wangguan.png",
    state: "1",
  },
  {
    x: "15",
    y: "5",
    name: "应用服务器1",
    img: "fuwuqi.png",
    state: "1",
  },
  {
    x: "17",
    y: "5",
    name: "数据中心",
    img: "shujuzhongx.png",
    state: "1",
  },
];
const links = [
  {
    source: "应用服务器",
    target: "备份负载",
    name: "访问",
  },
  {
    source: "派出所1",
    target: "应用服务器",
    name: "访问",
  },
  {
    source: "应用服务器",
    target: "Redis",
    name: "访问",
  },
  {
    source: "应用服务器",
    target: "备份负载",
    name: "访问",
  },
  {
    source: "应用服务器",
    target: "主流通道",
    name: "访问",
  },
  {
    source: "主流通道",
    target: "交换3",
    name: "访问",
  },
  {
    source: "派出所",
    target: "应用服务器",
    name: "访问",
  },
  {
    source: "备份负载",
    target: "交换2",
    name: "访问",
  },
  {
    source: "Redis",
    target: "交换1",
    name: "访问",
  },
  {
    source: "交换3",
    target: "隔离3",
    name: "访问",
  },
  {
    source: "交换2",
    target: "隔离2",
    name: "访问",
  },
  {
    source: "交换1",
    target: "隔离1",
    name: "访问",
  },
  {
    source: "隔离3",
    target: "交换6",
    name: "访问",
  },
  {
    source: "隔离2",
    target: "交换5",
    name: "访问",
  },
  {
    source: "隔离1",
    target: "交换4",
    name: "访问",
  },
  {
    source: "交换6",
    target: "网关",
    name: "访问",
  },
  {
    source: "交换5",
    target: "网关",
    name: "访问",
  },
  {
    source: "交换4",
    target: "网关",
    name: "访问",
  },
  {
    source: "网关",
    target: "应用服务器1",
    name: "访问",
  },
  {
    source: "应用服务器1",
    target: "数据中心",
    name: "访问",
  },
];

// 构造图表数据
function buildChartData(nodes, links) {
  const dataMap = new Map();
  const chartNodes = [];
  const chartLinks = [];
  const linesData = [];

  nodes.forEach((node) => {
    const x = parseInt(node.x);
    const y = parseInt(node.y);
    const symbolUrl = "/static/" + node.img;

    chartNodes.push({
      name: node.name,
      value: [x, y],
      symbolSize: 40,
      symbol: `image://${symbolUrl}`,
      itemStyle: {
        color: "#12b5d0",
      },
    });
    dataMap.set(node.name, [x, y]);
  });

  links.forEach((link) => {
    const sourceNode = nodes.find((n) => n.name === link.source);
    const labelName = sourceNode?.state === "1" ? "数据传输中" : "暂停传输";

    chartLinks.push({
      source: link.source,
      target: link.target,
      label: {
        show: true,
        formatter: labelName,
        color: sourceNode?.state === "1" ? "#27b0fe" : "#ed46a2",
        fontSize: 12,
        fontWeight: "normal",
      },
      lineStyle: {
        color: sourceNode?.state === "1" ? "#27b0fe" : "#ed46a2",
        width: 0.5,
      },
    });

    if (sourceNode?.state === "1") {
      linesData.push([
        { coord: dataMap.get(link.source) },
        { coord: dataMap.get(link.target) },
      ]);
    }
  });

  return { chartNodes, chartLinks, linesData };
}

// 渲染图表
function drawChart() {
  chartInstance.value = echarts.init(document.getElementById("main2"));

  const { chartNodes, chartLinks, linesData } = buildChartData(nodes, links);

  const option = {
    title: {
      text: "网络拓扑图",
    },
    tooltip: {
      trigger: "item",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        // 注意：params 是一个对象，不是数组
        return `<p>名称: ${params.name}</p>`;
      },
    },
    // backgroundColor: "#F5F5F5",
    xAxis: {
      min: 0,
      max: 18,
      show: false,
      type: "value",
    },
    yAxis: {
      min: 0,
      max: 12,
      show: false,
      type: "value",
    },
    series: [
      {
        type: "graph",
        layout: "none",
        coordinateSystem: "cartesian2d",
        edgeSymbol: ["", "arrow"],
        label: {
          show: true,
          position: "bottom",
          color: "#12b5d0",
        },
        lineStyle: {
          width: 2,
          opacity: 1,
        },
        draggable: true,
        data: chartNodes,
        links: chartLinks,
        z: 4,
        legendHoverLink: true,
        itemStyle: {
          label: {
            show: true,
            formatter: function (item) {
              return item.data.name;
            },
          },
        },
      },
    //   {
    //     name: "A",
    //     type: "lines",
    //     coordinateSystem: "cartesian2d",
    //     z: 4,
    //     effect: {
    //       show: true,
    //       trailLength: 0,
    //       symbol: "arrow",
    //       color: "#12b5d0",
    //       symbolSize: 8,
    //     },
    //     lineStyle: {
    //       curveness: 0,
    //     },
    //     data: linesData,
    //   },
    ],
  };

  chartInstance.value.setOption(option);
}

// 生命周期挂载
onMounted(() => {
  drawChart();
});
</script>

<style lang="less" scoped="scoped">
.tuopu-view {
    position: absolute;
    width: 70%;
    height: 50%;
    // background-color: #111e54;
    top: 0;
    right: 0;
    // left: 20vw;
//   margin-top: 20px;
  .tuopu-view-chart-wrapper {
    display: flex;
    // height: 500px;
  }
  .echarts {
    // flex: 0 0 70%;
    width: 100%;
    height: 100%;
  }
}
</style>
